import {createTheme, responsiveFontSizes} from "@mui/material";

export const headerTheme = responsiveFontSizes(createTheme({
    components: {
        MuiAppBar: {
            defaultProps: {
                sx: {
                    padding: {xs: '0.55em 0.1em', md: '0.55em 4.25em'},
                }
            },
            styleOverrides: {
                root: {
                    position: 'sticky',
                    backgroundColor: '#000000',
                    display: 'flex',
                    flexDirection: 'row',
                    color: '#ffffff',
                    alignItems: 'center'
                }
            }
        },
        MuiTabs: {
            styleOverrides: {
                indicator: {
                    display: 'none',
                },
                root: {
                    transition: "all .5s ease",
                    WebkitTransition: "all .5s ease",
                    '.MuiTab-root': {
                        fontWeight: '550',
                        color: '#ffffff',

                        '&.Mui-selected': {
                            background: '#ffffff',
                            color: '#000000',
                            borderRadius: '25px'
                        }
                    }
                }
            }
        },
        MuiIconButton: {
            styleOverrides: {
                root: {
                    color: 'white'
                }
            }
        },
        MuiTypography: {
            defaultProps: {
                ml: { xs: 5, md: 0 },
                component: "a",
                variant: 'h4',
                letterSpacing: '0.1em',
                sx: {
                    cursor: {sm: 'default', md: 'pointer'}
                }
            },
            styleOverrides: {
                root: {
                    cursor: 'pointer',
                }
            }
        },
    }
}))
